<div class="col-lg-12">
    <div class="panel panel-info" ng-switch="isLoaded">
        <div class="panel-heading">Network Whitelist <span class="badge pull-right">{{ items_displayed() }} of {{ totalItems }}</span></div>
        <div class="panel-body" ng-switch-when="false">
          <p>Loading . . .</p>
          <div ng-switch-when="true" class="alert alert-danger">
            {{err_message}}
          </div>
        </div>
        <div class="panel-body" ng-switch-when="true">
            <table class="table table-striped">
                    <tr>
                        <th>Network Name</th>
                        <th>CIDR</th>
                        <th>Notes</th>
                        <th ng-if="us.hasRole('Admin')"><button ng-click="createWhitelist()" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-plus"></i></button></th>
                    </tr>
                    <tr ng-repeat="cidr in cidrs">
                        <td ng-if="us.hasRole('Admin')"><a href="#/viewwhitelist/{{cidr.id}}">{{cidr.name}}</a></td>
                        <td ng-if="!us.hasRole('Admin')">{{cidr.name}}</td>
                        <td>{{cidr.cidr}}</td>
                        <td>{{cidr.notes}}</td>
                        <td ng-if="us.hasRole('Admin')"><button class="btn btn-xs btn-danger" ng-click="deleteWhitelist(cidr)">Delete</button></td>
                    </tr>
                </table>
        </div>
        <div class="panel-footer">
            <div class="row">
            <div class="col-lg-9">
              <pagination
                  items-per-page="ipp_as_int"
                  total-items="totalItems"
                  page="currentPage"
                  on-select-page="pageChanged()"
                  max-size="maxSize"
                  boundary-links="true"

                  ></pagination>
              </div>
              <div class="col-lg-3 pull-right">
              <br/> <!-- Why do I need a br-tag to get the dropdown to line up properly? -->
                <select ng-model="items_per_page" class="form-control">
                  <option
                    ng-repeat="page in items_per_page_options"
                    value="{{page}}">{{page}}</option>
                </select>
              </div>
              <div class="clearfix"></div>
              </div>
              <!--  -->
          </div>
    </div>
</div>
